/**
 * Created by wzl on 2017/4/23.
 */
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import {connect} from "react-redux";
import {geom2VecArr,positionToTileXY} from './util/util'
import {loadTiles} from './actions/actions';

class ReactThree extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.cameraPosition = new THREE.Vector3(0, -2, 5);
        this.cameraLookAt=new THREE.Vector3(0,0,0);
        this.points=[new THREE.Vector2(-1,-1),new THREE.Vector2(1,-1),new THREE.Vector2(0,1)];
    }

    render() {
        const width = window.innerWidth; // canvas width
        const height = window.innerHeight; // canvas height

        return (<React3
            mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
            width={width}
            height={height}
        >
            <scene>
                <perspectiveCamera
                    name="camera"
                    fov={75}
                    aspect={width / height}
                    near={0.1}
                    far={1000}

                    position={this.cameraPosition}
                    lookAt={this.cameraLookAt}
                />
                <span>
                    <mesh>
                    <extrudeGeometry
                        amount={2}
                        bevelEnabled={false}
                    >
                        <shape
                            points={this.points}
                        />
                    </extrudeGeometry>
                    <meshPhongMaterial
                        color={0x00ff00}
                        emissive={0x072534}
                        transparent={true}
                        opacity={0.8}
                    />
                    </mesh>
                </span>

            </scene>
        </React3>);
    }
}

export default ReactThree;